/*
 * Copyright 2017 StreamSets Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

pipeline-graph {

  .graph-container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    svg {
      &:focus {
        outline:none;
      }
    }

    .graph-toolbar {

      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      .pan-toolbar {
        position: relative;
        border: 1px solid #ccc;
        -moz-border-radius: 50%;
        -webkit-border-radius: 390px;
        border-radius: 390px;
        list-style-type: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        width: 60px;
        height: 60px;
        bottom: 150px;
        right: 30px;
        background-color: #fff;
        background-clip: padding-box;
        float: right;

        span {
          cursor: pointer;
          font-size: 0.9em;
          color: @streamsets-icon-btn-color;

          &:hover {
            color: @streamsets-icon-btn-hover-color;
          }
        }

        .pan-up {
          left: 23px;
        }

        .pan-right {
          left: 42px;
        }

        .pan-home {
          left: 22px;
          top: -19px;
        }

        .pan-left {
          left: 3px;
          top: -39px;
        }

        .pan-down {
          left: 23px;
          top: -40px;
        }



      }

      .zoom-toolbar {
        position: relative;
        float: right;
        top: -80px;
        right: -12px;
        color: @streamsets-icon-btn-color;
        background-color: #ffffff;
        background-clip: padding-box;
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);

        div {
          padding: @smallPadding*.5 @defaultPadding * .7 ;

          span {
            &:hover {
              color: @streamsets-icon-btn-hover-color;
            }
          }
        }
      }

      .action-toolbar {
        float: right;
        position: relative;
        right: 0;
        bottom: 50px;

        .icon-button {
          cursor: pointer;
        }
      }
    }

    .warning-toolbar {
      position: relative;
      float: left;
      top: -60px;
      left: 30px;
    }
  }

  .conceptG text{
    pointer-events: none;
  }

  .node-warning {
    position: static;
    padding: @defaultPadding/5;
    font-size: 22px;
    color: @brand-danger;
  }

  .node-config {
    color: @streamsets-icon-btn-color;
  }

  marker{
    fill: @default-pipeline-graph-fill-color;
  }

  g {
    image {
      &.node-icon {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      }
    }

    &.rectangleG {
      .lane-number {
        fill: #000000;
      }

      rect {
        fill: @default-pipeline-graph-fill-color;
        stroke: @default-pipeline-graph-stroke-color;
        stroke-width: 2px;
      }

      circle {
        fill: #ffffff;
        stroke: @default-pipeline-graph-stroke-color;
        stroke-width: 2px;

        &.dirty {
          fill: @brand-danger;
          stroke: @brand-danger;
        }
      }

      .running-stage {
        visibility: hidden;
        margin-left: 2px;
        color: @default-pipeline-graph-start-node-color;
      }

      &:hover {
        rect {
          fill: @default-pipeline-graph-selection-color;
          stroke: @default-pipeline-graph-selection-color;
          opacity: 0.6;
        }

        circle {
          stroke: @default-pipeline-graph-selection-color;
          &.dirty {
            fill: @brand-danger;
            stroke: @brand-danger;
          }
        }

        text {
          cursor: default;
          fill: #ffffff;

          &.lane-number {
            fill: #000000;
          }
        }

        image {
          fill: #ffffff;
        }

        .running-stage {
          color: #000000;
        }

        .node-config {
          color: #000000;
        }
      }
    }

    &.beta {
      rect {
        fill: @beta-pipeline-graph-fill-color;
      }
    }

    &.selected {
      rect {
        fill: @default-pipeline-graph-selection-color;
        stroke: @default-pipeline-graph-selection-color;
      }

      circle {
        stroke: @default-pipeline-graph-selection-color;

        &.dirty {
          fill: @brand-danger;
          stroke: @brand-danger;
        }
      }

      text {
        fill: #ffffff;
      }

      image {
        fill: #ffffff;
      }

      .node-config {
        color: #000000;
      }

      &:hover {
        rect {
          fill: @default-pipeline-graph-selection-color;
          stroke: @default-pipeline-graph-selection-color;
          opacity: 1;
        }
      }
    }

    &.runningNode {
      .running-stage {
        visibility: visible;
      }

      &.verbose {

        rect {
          fill: @default-pipeline-graph-start-node-color;
          stroke: @default-pipeline-graph-start-node-color;
        }

        circle {
          stroke: @default-pipeline-graph-start-node-color;
        }

        text {
          fill: #ffffff;
        }

        .running-stage {
          color: #ffffff;
        }
      }
    }

    &.startNode {
      rect {
        fill: @default-pipeline-graph-start-node-color;
        stroke: @default-pipeline-graph-start-node-color;
      }

      circle {
        stroke: @default-pipeline-graph-start-node-color;
      }

      text {
        fill: #ffffff;
      }

      image {
        fill: #ffffff;
      }

      .node-warning {
        //color: #ffffff;
      }

      &:hover {
        rect {
          fill: @default-pipeline-graph-start-node-color;
          stroke: @default-pipeline-graph-start-node-color;
          opacity: 1;
        }
      }
    }


    &.endNode {
      rect {
        fill: @default-pipeline-graph-end-node-color;
        stroke: @default-pipeline-graph-end-node-color;
      }

      circle {
        stroke: @default-pipeline-graph-end-node-color;
      }

      text {
        fill: #ffffff;
      }

      image {
        fill: #ffffff;
      }

      .node-warning {
        //color: #ffffff;
      }

      &:hover {
        rect {
          fill: @default-pipeline-graph-end-node-color;
          stroke: @default-pipeline-graph-end-node-color;
          opacity: 1;
        }
      }
    }



    &.connect-node {
      rect{
        fill: @default-pipeline-graph-selection-color;
        stroke: @default-pipeline-graph-selection-color;
        opacity: 0.75;
      }
    }


    &.pathG {

      .link {
        fill: none;
        stroke: @default-pipeline-graph-fill-color;
        stroke-width: 6px;
        cursor: default;

        &:hover {
          stroke: @default-pipeline-graph-selection-color;
        }

        &.hidden {
          stroke-width: 0;
        }
      }

      .edge-preview {
        color: #dddada;
        position: static;

        &.alerts-defined {
          color: #aaa7a7;
        }

        &.active-alerts-defined {
          color: #7f7c7c;
        }

        &.alert-triggered {
          color:  @brand-danger;
        }

      }

      &.selected {
        .link {
          stroke: @default-pipeline-graph-selection-color;
          opacity: 0.8;
        }

        .edge-preview {
          //color:  @default-pipeline-graph-selection-color;
          //opacity: 0.8;
        }
      }

    }
  }

  .dragline {
    fill: none;
    stroke: @default-pipeline-graph-fill-color;
    stroke-width: 6px;
    cursor: default;

    &.hidden {
      stroke-width: 0;
    }
  }



  .axis line {
    fill: none;
    stroke: #EFEFEF;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
  }

}

.stage-errors-tooltip {
  display: inline-block;
  text-align: left;
  width: 100%;
}

.config-properties{
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;

  .config-value {
    padding-right: @smallPadding;
    color: @streamsets-color;
  }
}
